<template>
  <div class="order-list-wrap">
    <div :class="{'is-mobile':showMobilePage}" class="header-box">
      <Title title="渠道单明细"><div v-if="detailData.reportId && !showMobilePage" @click="toReportDetail" class="check-report">查看数据报告</div></Title>
      <div :class="{'is-mobile':showMobilePage}" class="button-container">
        <FilterTool
          v-if="showMobilePage"
          ref="filterTool"
          v-model="filterInput"
          :is-show-filter="isShowFilter"
          :filter-list="filterList"
          is-search-resource
          show-search-btn
          show-mobile-icon
          class="order-FilterTool"
          @handelClick="queryClick"
          @queryEmpty="queryEmpty" />
        <MoreOpeator
          ref="moreOpeatorRef"
          :show-mobile-icon="showMobilePage"
          :list="[
            {label: '查看数据报告', handelClick: toReportDetail, auth: detailData.reportId && showMobilePage},
            {label: '导出', type: 'export', exportApi:`/admin/project/order/export?id=${id}`, exportName:'渠道单明细',isBeforeExport:true, beforeExport: exportBeforeExport, refName:'projectExportRef'},
            {label: '批量导入新增', type:'import', callback: importCallback, importApi:`admin/project/order/import/${id}`, auth: hasRouteAuth('crm:projectInfo:addOrder') && detailData && (detailData.projectStatus === 0 || detailData.projectStatus === 1 )},
            {label: '批量导入编辑', type:'import', callback: importCallback, importApi:`admin/project/orderEdit/import/${id}`, auth: hasRouteAuth('crm:projectInfo:importEdit') && detailData && (detailData.projectStatus === 0 || detailData.projectStatus === 1 )},
            {label: '批量删除', handelClick: toDeleted, auth: hasRouteAuth('crm:projectInfo:deleteOrder') && canOperate},
          ]"
          label="批量操作"
        />
      </div>
      <PlainCreateBtn
        v-if="hasRouteAuth('crm:projectInfo:addOrder') && detailData && (detailData.projectStatus === 0 || detailData.projectStatus === 1 )"
        :class="{'is-mobile':showMobilePage}"
        class="btn-right-item"
        @click="createOrder">添加</PlainCreateBtn>
    </div>
    <div v-if="!showMobilePage" style="display:flex;flex-wrap:wrap;margin-top: 0;padding:5px 0 12px 0;">
      <FilterTool ref="filterTool" v-model="filterInput" :is-show-filter="isShowFilter" :filter-list="filterList" is-search-resource show-search-btn class="order-FilterTool" @handelClick="queryClick" @queryEmpty="queryEmpty" />
    </div>
    <div class="table-list">
      <div v-loading="listLoading">
        <el-table
          v-if="list.items.length > 0"
          :data="list.items"
          :ref="tableRefName"
          class="fb-table"
          element-loading-text="加载中..."
          empty-text="暂无数据"
          header-cell-class-name="order-data-header-cell"
          fit
          hightlight-current-row
          @sort-change="sortMethod"
          @select="selectTable"
          @select-all="selectTable">
          <el-table-column
            v-if="hasRouteAuth('crm:projectInfo:deleteOrder') && canOperate"
            align="center"
            type="selection"
            width="50"/>
          <el-table-column align="left" label="订单编号" width="190">
            <template slot-scope="scope">
              <ToolTip v-if="scope.row.orderInfo.orderId" :content="scope.row.orderInfo.orderId" is-can-click @handelClick="toProjectChildDetail(scope.row)" />
              <div v-else>--</div>
            </template>
          </el-table-column>
          <el-table-column align="left" label="账号" width="140" prop="resource_name" sortable="custom">
            <template slot-scope="scope">
              <div class="flex-center">
                <frameContent
                  v-if="scope.row.dataAccount"
                  ref="frameContent"
                  :platform="scope.row.orderInfo.orderPlatform"
                  :data-account="scope.row.dataAccount"
                  :url="scope.row.dataLink"
                  :account-id="scope.row.orderInfo.resourceId"
                  :account-name="scope.row.orderInfo.resourceName" />
                <resource-info
                  v-if="scope.row.orderInfo.resourceName"
                  :resource-name="scope.row.orderInfo.resourceName"
                  :account-name-organization="scope.row.accountNameOrganization"
                  :account-name-platform="scope.row.accountNamePlatform"
                  :resource-id="scope.row.orderInfo.resourceCode"
                  style="max-width:calc(100% - 20px)"
                  account-belong-name="none"
                />
                <div v-else>--</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="right" label="含税金额(元)" width="130" prop="tax_included_amount" sortable="custom">
            <template slot-scope="scope">
              <div style="padding-right:22px;" >
                <PriceColumn :real-val="scope.row.orderInfo.taxAmount" :price="scope.row.orderInfo.taxAmount / 100" />
              </div>
            </template>
          </el-table-column>
          <el-table-column align="right" label="含税成本(元)" width="130" prop="cost" sortable="custom">
            <template slot-scope="scope">
              <div style="padding-right:22px;" >
                <PriceColumn :real-val="scope.row.orderInfo.cost" :price="scope.row.orderInfo.cost / 100" />
              </div>
            </template>
          </el-table-column>
          <el-table-column align="left" label="下单日期" width="120" prop="order_create_date" sortable="custom">
            <template slot-scope="scope">
              <div v-if="scope.row.orderInfo.orderTime">{{ scope.row.orderInfo.orderTime | standardFormatNoHour('YYYY/MM/DD') }}</div>
              <div v-else>--</div>
            </template>
          </el-table-column>
          <el-table-column align="left" label="下单平台" width="130">
            <template slot-scope="scope">
              <div class="flex-center">
                <platformIcon :data="scope.row.orderInfo.orderPlatform" />
                {{ scope.row.orderInfo.orderPlatform || '--' }}
              </div>
            </template>
          </el-table-column>
          <el-table-column align="left" label="备注" min-width="190">
            <template slot-scope="scope">
              <ToolTip :content="scope.row.orderInfo.remark"/>
            </template>
          </el-table-column>
          <el-table-column align="left" label="项目类型" min-width="110">
            <template slot-scope="scope">
              {{ scope.row.orderInfo.projectTypeStr || '--' }}
            </template>
          </el-table-column>
          <el-table-column align="right" label="刊例价(元)" width="130" prop="articles_price" sortable="custom">
            <template slot-scope="scope">
              <div style="padding-right:22px;" >
                <PriceColumn :real-val="scope.row.orderInfo.articlesPrice" :price="scope.row.orderInfo.articlesPrice / 100" />
              </div>
            </template>
          </el-table-column>
          <el-table-column align="left" label="折扣" width="110" sortable="custom" prop="discount">
            <template slot-scope="scope">
              {{ scope.row.orderInfo.discountPrice || '--' }}
            </template>
          </el-table-column>
          <el-table-column align="left" label="标签" width="150">
            <template slot-scope="scope">
              <ToolTip :content="scope.row.orderInfo.tag" type="arr" label-key="name" />
            </template>
          </el-table-column>
          <el-table-column align="left" label="收入类型" width="130">
            <template slot-scope="scope">
              <div v-if="scope.row.orderInfo.incomeTypeStr || scope.row.orderInfo.incomeType === 0">{{ scope.row.orderInfo.incomeTypeStr }}</div>
              <div v-else>--</div>
            </template>
          </el-table-column>
          <!-- <el-table-column align="left" label="账号归属" min-width="110" prop="account_belong_id" sortable="custom">
            <template slot-scope="scope">
              <ToolTip :content="scope.row.orderInfo.accountBelongName" />
            </template>
          </el-table-column> -->
          <el-table-column align="left" label="下单形式" min-width="110">
            <template slot-scope="scope">
              <ToolTip :content="scope.row.orderInfo.orderForm" />
            </template>
          </el-table-column>
          <el-table-column align="left" label="账号ID" min-width="110">
            <template slot-scope="scope">
              <ToolTip :content="scope.row.orderInfo.resourceCode" />
            </template>
          </el-table-column>
          <el-table-column align="left" label="系统ID" min-width="110">
            <template slot-scope="scope">
              <ToolTip :content="scope.row.orderInfo.resourceId" />
            </template>
          </el-table-column>
          <el-table-column align="left" label="执行人" min-width="100">
            <template slot-scope="scope">
              <CheckUserInfo
                v-if="scope.row.orderInfo.orderOperator && scope.row.orderInfo.orderOperator.length"
                :user-list="scope.row.orderInfo.orderOperator"
                multiple
              />
              <div v-else>--</div>
            </template>
          </el-table-column>
          <el-table-column align="left" label="协作部门" min-width="120">
            <template slot-scope="scope">
              <ToolTip :content="handelArr(scope.row.orderInfo.cooperationDepartment, 'name', '/')" />
            </template>
          </el-table-column>
          <el-table-column align="left" label="运营模式" min-width="200">
            <template slot-scope="scope">
              <ToolTip :content="scope.row.orderInfo.operateModeName" />
            </template>
          </el-table-column>
          <el-table-column align="left" label="合作运营方" min-width="160">
            <template slot-scope="scope">
              <ToolTip :content="scope.row.orderInfo.cooperation" />
            </template>
          </el-table-column>
          <el-table-column align="left" label="所有人员" min-width="150">
            <template slot-scope="scope">
              <ToolTip :content="scope.row.orderInfo.accountOperationList" />
            </template>
          </el-table-column>
          <el-table-column align="left" label="所属经营体" min-width="150">
            <template slot-scope="scope">
              <ToolTip v-if="scope.row.orderInfo.resourceAttributionMatrix" :content="scope.row.orderInfo.entityTip">
                <div class="ellipsisOne">{{ scope.row.orderInfo.resourceAttributionMatrix }}</div>
              </ToolTip>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column align="left" label="品牌名称" min-width="110" prop="theme" sortable="custom">
            <template slot-scope="scope">
              <ToolTip :content="scope.row.orderInfo.theme"/>
            </template>
          </el-table-column>
          <el-table-column align="left" label="发布文案" min-width="110">
            <template slot-scope="scope">
              <ToolTip v-if="scope.row.publishInfo && scope.row.publishInfo.publishRemark" :content="scope.row.publishInfo.publishRemark"/>
              <ToolTip v-else :content="scope.row.orderInfo.content"/>
            </template>
          </el-table-column>
          <el-table-column align="left" label="下单链接" min-width="110">
            <template slot-scope="scope">
              <ToolTip :content="scope.row.orderInfo.orderLink">
                <a v-if="isLink(scope.row.orderInfo.orderLink)" :href="scope.row.orderInfo.orderLink" style="color: #406EFF;display:flex;align-items:center;cursor: pointer;" target="_blank"><i class="el-icon-link" />链接</a>
                <div v-else class="overflow">{{ scope.row.orderInfo.orderLink }}</div>
              </ToolTip>
            </template>
          </el-table-column>
          <el-table-column align="left" label="销售" min-width="110">
            <template slot-scope="scope">
              <CheckUserInfo v-if="scope.row.clientInfo && scope.row.clientInfo.market" :label="scope.row.clientInfo.market" :user-id="scope.row.clientInfo.marketId" />
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column align="left" label="成本项" min-width="110">
            <template slot-scope="scope">
              <dialogCostlist :cost-list="scope.row.costBreakdown.costList || []" :order-id="scope.row.id" :btn-text="`共${scope.row.costBreakdown.costList?scope.row.costBreakdown.costList.length:0}项成本`" />
            </template>
          </el-table-column>
          <el-table-column align="left" label="创建人" min-width="110">
            <template slot-scope="scope">
              <CheckUserInfo v-if="scope.row.orderInfo.createName" :label="scope.row.orderInfo.createName" :user-id="scope.row.orderInfo.createUserId" />
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column align="left" label="创建时间" min-width="150" prop="create_date" sortable="custom">
            <template slot-scope="scope">
              {{ scope.row.orderInfo.createTime | standardFormatNoHour('YYYY/MM/DD') }}
            </template>
          </el-table-column>
          <el-table-column v-if="detailData.projectStatus <= 1" align="left" width="100" label="操作" fixed="right">
            <template slot-scope="scope">
              <div style="display:flex;">
                <div class="button-text" @click="toProjectChildDetail(scope.row)">查看</div>
                <el-dropdown trigger="click">
                  <div class="button-text bl">更多</div>
                  <el-dropdown-menu slot="dropdown" style="margin-top:-24px;margin-right:15px;padding: 0;">
                    <el-dropdown-item v-if="isEditAuth(scope.row, detailData)" style="width:100px;text-align: center" @click.native="toEdit(scope)">
                      <div>编辑</div>
                    </el-dropdown-item>
                    <el-dropdown-item :disabled="!hasRouteAuth('crm:projectInfo:deleteOrder') || (detailData.projectStatus !== 0 && detailData.projectStatus !== 1 )" style="width:100px;text-align: center" @click.native="toDeleted(scope)">
                      <div>删除</div>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <empty-placeholder v-else :text="orderAuth?'暂无数据':'暂无权限'" mode="table" is-border style="margin-top: 24px" />
      </div>
      <el-row type="flex" justify="end" class="pagination-area">
        <el-pagination
          v-show="list.total > 0"
          :current-page="list.page"
          :page-size="list.perPage"
          :total="list.total"
          :page-sizes="[20, 50, 100, 250, 500]"
          :layout="showMobilePage?'total, prev, next, jumper':'total, prev, pager, next, sizes, jumper'"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </el-row>
    </div>
  </div>
</template>

<script>
import setting from '@/assets/setting.png';
import Title from '@/components/Title';
import EmptyPlaceholder from '@/components/Common/emptyPlaceholder';
// import ImportBtn from '@/components/ReportManage/selectField/importField';
import FilterTool from '@/components/Tool/filter';
import createButton from '@/components/CreateButton';
import dialogCostlist from '@/components/OrderList/dialogComponent/dialogCostlist';
import ResourceInfo from '@/components/ResourceInfo';
import platformIcon from '@/components/Common/platformIcon';
import frameContent from '@/components/Common/frameContent';
import MoreOpeator from '@/components/Common/baseComponent/moreOpeator';
import projectEditAuth from '@/views/project/projectEditAuth';
import { moneyFilter } from '@/filters/number';
import { standardFormatNoHour } from '@/filters/date';
import { getOrderList, getProjectTypes, deleteProjectOrder } from '@/api/project';
import { getOperateoptions } from '@/api/resource';
import { getIncomeType, platformList } from '@/api/select';
import { getDepartmentAll, getTagAll } from '@/api/config';
import { hasRouteAuth } from '@/utils/permission';
import { paramsRangeFormat, paramsAryToStr } from '@/utils/paramsFormat';
import { TAG_MODULES } from '@/utils/const';
// 跨页选中逻辑
import tableSelections from '@/mixins/tableSelections';
import { mapState } from 'vuex';

export default {
  name: 'OrderList',
  filters: {
    standardFormatNoHour,
    moneyFilter
  },
  components: {
    FilterTool,
    Title, ResourceInfo,
    createButton,
    platformIcon,
    dialogCostlist,
    EmptyPlaceholder,
    frameContent, MoreOpeator
  },
  mixins: [tableSelections, projectEditAuth],
  props: {
    detailData: {
      type: Object,
      default: () => {
        return null;
      }
    },
    supplierName: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      TAG_MODULES,
      importApi: 'admin/project/order/import',
      setting,
      id: '',
      listLoading: false,
      list: {
        items: [],
        page: 1,
        perPage: 20,
        total: 0,
        isInit: true,
        totalAmount: '',
        amount: {}
      },
      perPage: 20,
      page: 1,
      filterInput: {},
      isShowFilter: false,
      tableRefName: 'ordersTableRef', // 表格的ref名称
      idKey: 'id', // 唯一表示字段
      ids: '',
      sortName: '',
      sortType: '',
      platformTypeOption: [],
      selectList: [], // 列表已选字段
      operateModeList: [], // 运营模式列表
      deptTreeList: [],
      rangeKeyArr: [{
        attr: 'createTime',
        start: 'createStartTime',
        end: 'createEndTime',
        type: 'time'
      }, {
        attr: 'orderTime',
        start: 'orderStartTime',
        end: 'orderEndTime',
        type: 'time'
      }],
      arrayKeyArr: ['tag', 'orderPlatformId', 'cooperationDepartment', 'operateMode', 'resourceAttributionMatrixId'],
      tagTreeList: [],
      projectTypeListData: [],
      supplierType: [{ label: '公司', value: 0 }, { label: '个人', value: 1 }]
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    }),
    orderAuth() {
      return hasRouteAuth('crm:projectInfo:orderDetailRead') || hasRouteAuth('crm:projectInfo:orderDetailAdmin');
    },
    canOperate() {
      return this.detailData && (this.detailData.projectStatus === 0 || this.detailData.projectStatus === 1);
    },
    filterList() {
      return [
        { keyword: 'orderId', name: '订单编号', labelWidth: '100px', type: 'input' },
        { keyword: 'remark', name: '备注', labelWidth: '100px', type: 'input' },
        { keyword: 'resourceName', name: '账号', labelWidth: '100px', type: 'input' },
        { keyword: 'supplier', name: '供应商', labelWidth: '100px', type: 'input' },
        { keyword: 'market', name: '销售', labelWidth: '100px', type: 'input' },
        { keyword: 'theme', name: '品牌名称', labelWidth: '100px', type: 'input' },
        { keyword: 'content', name: '文案内容', labelWidth: '100px', type: 'input' },
        { keyword: 'resourceCode', name: '账号ID', labelWidth: '100px', type: 'input' },
        { keyword: 'systemId', name: '系统ID', labelWidth: '100px', type: 'input' },
        { keyword: 'orderOperator', name: '执行人', labelWidth: '100px', type: 'input' },
        { keyword: 'cooperation', name: '合作运营方', labelWidth: '100px', type: 'input' },
        { keyword: 'accountOperationList', name: '所有人员', labelWidth: '100px', type: 'input' },
        { keyword: 'projectType', name: '项目类型', type: 'select', options: this.projectTypeListData },
        { keyword: 'incomeType', name: '收入类型', type: 'select', options: [{ value: -1, label: '全部' }] },
        { keyword: 'orderPlatformId', name: '下单平台', type: 'mulSelect', options: this.platformTypeOption },
        { keyword: 'cooperationDepartment', name: '协作部门', type: 'cascaderSelectWithChild',
          childrenVal: 'children', options: this.deptTreeList },
        { keyword: 'operateMode', name: '运营模式', valueName: 'value', labelName: 'label', multiple: true, collapseTags: true,
          childrenVal: 'children', type: 'cascaderSelect', checkStrictly: false, options: this.operateModeList },
        { keyword: 'resourceAttributionMatrixId', name: '所属经营体', type: 'cascaderSelectWithChild',
          childrenVal: 'children', options: this.deptTreeList },
        { keyword: 'orderTime', labelWidth: '100px', name: '下单日期', timeType: 'daterange', type: 'rangeDate', format: 'yyyy/MM/dd' },
        { keyword: 'createTime', labelWidth: '100px', name: '创建时间', timeType: 'daterange', type: 'rangeDate', format: 'yyyy/MM/dd' },
        { keyword: 'tag', name: '标签', valueName: 'id', labelName: 'name',
          childrenVal: 'item', type: 'cascaderSelect', checkStrictly: false, options: this.tagTreeList,
          multiple: true, filterable: true, collapseTags: true },
        { keyword: 'supplierType', name: '供应商类型', type: 'select', options: this.supplierType }
      ];
    }
  },
  watch: {
    supplierName: {
      handler(newVal) {
        if (newVal) {
          this.$set(this.filterInput, 'supplier', newVal);
          this.isShowFilter = true;
        } else {
          this.$set(this.filterInput, 'supplier', '');
          this.isShowFilter = false;
        }
      },
      immediate: true
    }
  },
  created() {
    this.id = Number(this.$route.params.id) || '';
    this.fetchData();
    this.incomeTypeList();
    this.platformTypeList();
    this.projectTypeList();
    this.getOperate();
    this.queryDeptTreeList();
    this.queryTagTreeList();
  },
  methods: {
    hasRouteAuth,
    toProjectChildDetail(row) {
      const url = this.$router.resolve({
        name: 'projectChildDetail',
        params: { id: row.orderInfo.id }
      });
      window.open(url.href, '_blank');
    },
    incomeOderClick(id) {
      // const filterTool = this.$refs.filterTool;
      // const level = filterTool.level;
      // if (level === 'normal') {
      //   filterTool.changeLevel();
      // }
      this.$set(this.filterInput, 'projectType', id);
      // filterTool.selectChange();
      this.fetchData();
    },
    // 获取项目类型
    async projectTypeList() {
      try {
        const result = await getProjectTypes({ type: 2 });
        const projectOption = result.data.map(item => {
          return {
            value: item.id,
            label: item.name
          };
        });
        this.projectTypeListData = [{ value: -1, label: '全部' }, ...projectOption];
      } catch (error) {
        console.log(error);
      }
    },
    isLink(str) {
      const reg = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)([A-Za-z0-9-~]+)/;
      return reg.test(str);
    },
    toReportDetail() {
      const routeUrl = this.$router.resolve({
        name: 'publishDetail',
        params: {
          id: this.detailData.reportId
        }
      });
      window.open(routeUrl.href, '_blank');
    },
    // 获取收入类型的列表
    async incomeTypeList() {
      try {
        const result = await getIncomeType();
        const incomeOption = result.data.map(item => {
          return {
            value: item.id,
            label: item.name
          };
        });
        const newFilterItem = {
          keyword: 'incomeType', name: '收入类型', type: 'select',
          options: [{ value: -1, label: '全部' }, ...incomeOption]
        };
        this.$set(this.filterList, 8, newFilterItem);
      } catch (error) {
        console.log(error);
      }
    },
    // 获取下单平台选项
    async platformTypeList() {
      this.platformTypeOption.push({ value: -1, label: '全部' });
      try {
        const result = await platformList();
        const option = result.data.map(item => {
          return {
            value: item.id,
            label: item.value
          };
        });
        this.platformTypeOption.push(...option);
      } catch (error) {
        console.log(error);
      }
    },
    // 获取运营模式的列表
    getOperate() {
      getOperateoptions().then(res => {
        this.operateModeList = res.data;
      });
    },
    createOrder() {
      this.$router.push({
        name: 'projectOrderCreate',
        query: { projectId: this.id }
      });
    },
    exportBeforeExport() {
      const params = this.getParams();
      params.ids = this.ids;
      if (this.$refs.moreOpeatorRef) {
        this.$refs.moreOpeatorRef.btnExport(params, 'projectExportRef');
      }
    },
    importCallback() {
      this.fetchData();
      this.$emit('getIncomeList');
      this.$emit('getDetail');
    },
    getParams() {
      const params = JSON.parse(JSON.stringify(this.filterInput));
      paramsRangeFormat(this.rangeKeyArr, params);
      paramsAryToStr(this.arrayKeyArr, params);
      return params;
    },
    fetchData(reset = false) {
      if (reset) this.page = 1;
      const params = this.getParams();
      params.notShowNoAuthTip = true;
      params.sortName = this.sortName;
      params.sortType = this.sortType;
      this.listLoading = true;
      getOrderList(this.id, this.page, this.perPage, params).then(({ data }) => {
        this.list = data;
        this.list.isInit = false;
        this.listLoading = false;
        if (this.setSelectRow) this.setSelectRow(data.items);
      }).catch(e => {
        console.error(e);
        this.listLoading = false;
      });
    },
    sortMethod(a) {
      if (!a.order) {
        this.sortName = '';
        this.sortType = '';
      } else {
        this.sortName = a.prop;
        this.sortType = a.order === 'ascending' ? 1 : -1;
      }
      this.fetchData();
    },
    queryEmpty() {
      this.filterInput = {};
      this.queryClick();
    },
    queryClick() {
      this.fetchData(true);
    },
    handleSizeChange(val) {
      this.perPage = val;
      this.fetchData(true);
      this.$nextTick(() => {
        document.body.scrollTop = document.documentElement.scrollTop = 0;
      });
    },
    handleCurrentChange(toPage) {
      this.page = toPage;
      this.fetchData();
      this.$nextTick(() => {
        document.body.scrollTop = document.documentElement.scrollTop = 0;
      });
    },
    toEdit(scope) {
      this.$router.push({
        name: 'projectOrderEdit',
        params: { id: scope.row.orderInfo.id },
        query: { projectId: this.id }
      });
    },
    toDeleted(scope) {
      const id = scope ? scope.row.orderInfo.id : '';
      if (!id && !this.ids) {
        this.$message.warning(`请勾选需要删除的订单`);
        return false;
      }
      this.$confirm(`是否确定删除${!scope ? '' : '该'}订单`, '', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        center: true,
        type: 'warning',
        customClass: ' del-message del-message-cancel',
        iconClass: 'del-icon'
      }).then(() => {
        deleteProjectOrder(!scope ? this.ids : id).then(res => {
          this.$message.success('删除成功');
          // this.fetchData();
          this.clearMixinSelection();
          this.importCallback();
        }, result => {
          // this.$message.error(result.message);
        }).catch(err => {
          console.error(err);
        });
      });
    },
    // 多选
    tableSelectionChange(e) {
      this.ids = e.map(i => i.id).join(',');
    },
    clearSelection() {
      if (this.$refs[this.tableRefName]) this.$refs[this.tableRefName].clearSelection();
    },
    // 所属部门
    queryDeptTreeList() {
      getDepartmentAll().then(res => {
        this.deptTreeList = (res && res.data) || [];
      }).catch(e => {
        console.log(e);
      });
    },
    queryTagTreeList() {
      const params = { type: this.TAG_MODULES.PROJECT_CHANNEL };
      getTagAll(params).then(res => {
        this.tagTreeList = (res && res.data) || [];
        this.tagTreeList.forEach(item => {
          if (!item.item) item.disabled = true;
        });
      }).catch(e => {
        console.log(e);
      });
    },
    handelArr(list, key, division) {
      if (!list || list.length === 0) return '--';
      return list.map(i => i[key]).join(division);
    }
  }
};
</script>

<style lang="scss" scoped>
.order-list-wrap {
  margin-top: 24px;
  .header-box {
    display: flex;
    align-items: center;
    &.is-mobile {
      margin-bottom: 16px;
    }
    .check-report {
      cursor: pointer;
      color: #406EFF;
      margin-left: 12px;
    }
  }
  .btn-right-item {
    margin-left: 16px;
    &.is-mobile {
      margin: 0;
    }
  }
  .button-container {
    margin-left: 16px;
    .batch-button {
      height:32px;
      background:rgba(239,243,251,1);
      border-radius:4px;
      border: none;
      color: #406EFF;
      padding: 0 12px;
    }
    &.is-mobile {
      display: flex;
    }
  }
}
.order-FilterTool {
  &::v-deep {
    .el-range-editor--small {
      &.el-input__inner {
        width: 240px !important;
      }
      .el-range-input {
        width: 42% !important;
      }
    }
  }
}
.overflow {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.batch-set {
  background: #406eff;
  border-color: #406eff;
  color: #fff;
  height: 32px;
}
</style>
